<template>
	<view>
		<!-- 我的收入详情内容 -->
		<view class="content">
			<view class="bottom">
				<view class="bottom-left">
					<text>+&nbsp;{{ totalIncome }}</text>
					<text>本月收入</text>
				</view>
				<view class="bottom-right">
					<text>-&nbsp;{{ totalExpense }}</text>
					<text>本月支出</text>
				</view>
			</view>
		</view>
		<view class="waybill" v-for="(record, index) in transactionRecords" :key="index">
			<view class="picture">
				<image src="/photo/shouzhimingxi/money.png" style="width: 80rpx; height: 80rpx;"></image>
			</view>
			<view class="father">
				<view class="pay">
					<text>{{ getTransactionType(record.status) }}</text>
					<text>{{ record.status === 0? '+' : '-' }}{{ record.moeny }}</text>
				</view>
				<view class="time">
					<text>{{ formatTime(new Date(record.ftime)) }}</text>
					<text>零钱余额&nbsp;{{ formatBalance(record.sum) }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	// 引入存放用户信息的容器
	import {
		userStore
	} from '@/stores/user';
	// 引入拦截器
	import '@/config/requst.js';
	import {
		http
	} from '@/config/requst.js';

	const u = userStore();
	// 交易记录
	const transactionRecords = ref([]);
	// 总收入
	const totalIncome = ref(0);
	// 总支出
	const totalExpense = ref(0);
	// 初始余额，这里假设初始余额为1000，你可以根据实际情况修改
	let currentBalance = 1000;

	const getTransactionType = (status) => {
		return status === 0 ? '来自商户收入' : '向商户支付';
	};

	// 格式化余额函数
	const formatBalance = (balance) => {
		return parseFloat(balance).toFixed(2);
	};
	
	// 定义格式化函数
	const formatTime = (date) => {
	  const year = date.getFullYear();
	  const month = String(date.getMonth() + 1).padStart(2, '0');
	  const day = String(date.getDate()).padStart(2, '0');
	  const hour = String(date.getHours()).padStart(2, '0');
	  const minute = String(date.getMinutes()).padStart(2, '0');
	  return `${month}月${day}日 ${hour}:${minute}`; // 修改为你需要的时间格式
	};

	const selectAll = async () => {
		try {
			// 从userStore中获取用户id
			const userId = u.user.id;
			const res = await http({
				url: "/bill/selectAll/" + userId
			});
			if (res.code === 20041) {
				// 查询成功，将数据绑定到transactionRecords
				if (Array.isArray(res.shuju)) {
					transactionRecords.value = res.shuju;
					// 计算本月收入和支出，并更新余额
					transactionRecords.value.forEach((record) => {
						const moeny = parseFloat(record.moeny);
						if (!isNaN(moeny)) {
							if (record.status === 0) {
								totalIncome.value += moeny;
								currentBalance += moeny; // 收入时增加余额
							} else {
								totalExpense.value += moeny;
								currentBalance -= moeny; // 支出时减少余额
							}
							record.sum = formatBalance(currentBalance); // 更新每条记录中的余额并格式化
						}
					});
				} else {
					console.error('后端返回的数据不是数组:', res.shuju);
					return;
				}
			} else {
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: 'error'
				});
			}
		} catch (error) {
			console.error('查询失败:', error);
			uni.showToast({
				title: '查询失败，请稍后重试',
				duration: 2000,
				icon: 'error'
			});
		}
	};

	onMounted(() => {
		// 调用查询方法
		selectAll();
	});
</script>

<style lang="scss" scoped>
	//--------------------------------我的收入详情内容视图样式------------------------
	// 我的收入详情内容样式
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 200rpx;
		background-color: rgba(0, 47, 147, 0.9);
		color: white;

		// 底部本月收入 以及待结算的盒子视图样式
		.bottom {
			display: flex;
			justify-content: space-around;
			font-size: 30rpx;

			// 本月收入视图容器样式
			.bottom-left {
				height: 100rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
			}

			// 待结算视图容器样式
			.bottom-right {
				height: 100rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
			}
		}
	}

	//--------------------------------我的收入详情内容视图样式------------------------
	// 我的收入详情内容视图样式
	.waybill {
		height: 150rpx;
		background-color: white;
		display: flex;
		align-items: center;

		.picture {
			margin-left: 20rpx;
			margin-right: 20rpx;
		}

		.father {
			width: 100%;
			margin-right: 10rpx;

			.pay {
				display: flex;
				justify-content: space-between;
			}

			.time {
				display: flex;
				justify-content: space-between;
				font-size: 20rpx;
				color: rgba(0, 0, 0, 0.6);
				margin-top: 5rpx;
			}
		}
	}
</style>